<template>
    <div id="box_detail_3D">
        <div id="energy2"></div>
        <div class="data_3d_left" :style="{left:left}">
            <div class="title">
                基础信息
            </div>
            <div class="show_btn" @click="setLeft">
                <a-icon type="right" />
            </div>
            <div class="info">
                <span class="desc">设备名称</span>
                <span class="con">GG-1</span>
            </div>
            <div class="info">
                <span class="desc">设备类型</span>
                <span class="con">锂电池</span>
            </div>
            <div class="info">
                <span class="desc">电站名称</span>
                <span class="con">深圳南山西丽茶山G-12A</span>
            </div>
            <div class="info">
                <span class="desc">型号</span>
                <span class="con">GG-1</span>
            </div>
            <div class="info">
                <span class="desc">电站详细地址</span>
                <span class="con">深圳市</span>
            </div>
            <div class="info">
                <span class="desc">换机历史</span>
                <span class="con">-</span>
            </div>
            <div class="info">
                <span class="desc">SN</span>
                <span class="con">-</span>
            </div>
            <div class="info">
                <span class="desc">软件包名称</span>
                <span class="con">-</span>
            </div>
            <div class="info">
                <span class="desc">软件包版本</span>
                <span class="con">V1.23.4</span>
            </div>
        </div>
        <div class="data_3d_right" :style="{right:right}">
            <div class="show_btn" @click="setRight">
                <a-icon type="left" />
            </div>
            <div class="title">
                实时数据
            </div>
            <div class="info_box">
              <div class="info">
                  <div class="con">运行</div>
                  <div class="desc">运行状态</div>
              </div>
              <div class="info">
                  <div class="con">42V</div>
                  <div class="desc">电压</div>
              </div>
              <div class="info">
                  <div class="con">26.8°C</div>
                  <div class="desc">最高温度</div>
              </div>
              <div class="info">
                  <div class="con">3</div>
                  <div class="desc">最高温度位置</div>
              </div>
              <div class="info">
                  <div class="con">22°C</div>
                  <div class="desc">最低温度</div>
              </div>
              <div class="info">
                  <div class="con">1</div>
                  <div class="desc">最低温度位置</div>
              </div>
              <div class="info">
                  <div class="con">5%</div>
                  <div class="desc">SOC</div>
              </div>
              <div class="info">
                  <div class="con">100%</div>
                  <div class="desc">SOH</div>
              </div>
              <div class="info">
                  <div class="con">429876Wh</div>
                  <div class="desc">累计充电量</div>
              </div>
              <div class="info">
                  <div class="con">429876Wh</div>
                  <div class="desc">累计放电量</div>
              </div>
              <div class="info">
                  <div class="con">128</div>
                  <div class="desc">循环次数</div>
              </div>
              <div class="info">
                  <div class="con">2187mV</div>
                  <div class="desc">电芯最高电压</div>
              </div>
              <div class="info">
                  <div class="con">3</div>
                  <div class="desc">电芯最高电压位置</div>
              </div>
              <div class="info">
                  <div class="con">2187mV</div>
                  <div class="desc">电芯最低电压</div>
              </div>
              <div class="info">
                  <div class="con">2087mV</div>
                  <div class="desc">电芯最低电压位置</div>
              </div>
              <div class="info">
                  <div class="con">15%</div>
                  <div class="desc">电芯最高SOC</div>
              </div>
              <div class="info">
                  <div class="con">20</div>
                  <div class="desc">电芯最高SOC位置</div>
              </div>
              <div class="info">
                  <div class="con">5%</div>
                  <div class="desc">电芯最低SOC</div>
              </div>
              <div class="info">
                  <div class="con">23</div>
                  <div class="desc">电芯最低SOC位置</div>
              </div>
              <div class="info">
                  <div class="con">正常</div>
                  <div class="desc">优化单元状态</div>
              </div>
              <div class="info">
                  <div class="con">10</div>
                  <div class="desc">位置信息</div>
              </div>
              <div class="info">
                  <div class="con">0.1A</div>
                  <div class="desc">电流</div>
              </div>
              <div class="info">
                  <div class="con">5W</div>
                  <div class="desc">充放电功率</div>
              </div>
              <div class="info">
                  <div class="con">22°C</div>
                  <div class="desc">电池平均温度</div>
              </div>
              <div class="info">
                  <div class="con">0.01°C</div>
                  <div class="desc">模组内最大温差</div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as THREE from 'three'
    import {
        OrbitControls
    } from "three/examples/jsm/controls/OrbitControls"
    import {
        OBJLoader
    } from 'three/examples/jsm/loaders/OBJLoader';
    import {
        MTLLoader
    } from 'three/examples/jsm/loaders/MTLLoader'
    import Stats from 'three/examples/jsm/libs/stats.module.js'
    import diban from "/src/pages/home/3dModels/diban.png"
    import mian1 from "/src/pages/home/3dModels/mian1.jpg"
    import mian2 from "/src/pages/home/3dModels/mian2.jpg"
    import mian3 from "/src/pages/home/3dModels/mian3.jpg"
    import mian4 from "/src/pages/home/3dModels/mian4.jpg"
    export default {
        data() {
            return {
                right:'10px',
                left:'10px'
            }
        },
        created() {
            
        },
        mounted() {
              // var stats = initStats();
              var scene, camera, renderer, controls, light;
              let _this= this
              // 初始化场景
              function initScene() {
                  scene = new THREE.Scene();
                  scene.fog = new THREE.Fog(scene.background, 3000, 5000);
                  let mesh = []//网格模型对象Mesh
                  function choose(event) {
                    event.preventDefault();
                    var Sx = event.clientX; //鼠标单击位置横坐标
                    var Sy = event.clientY; //鼠标单击位置纵坐标
                    let dom = document.getElementById('energy2')
                    //屏幕坐标转WebGL标准设备坐标
                    var x = (Sx / (dom.offsetWidth+5)) * 2 - 1; //WebGL标准设备横坐标
                    var y = -(Sy / (dom.offsetHeight+120)) * 2 + 1; //WebGL标准设备纵坐标
                    
                    //创建一个射线投射器`Raycaster`
                    var raycaster = new THREE.Raycaster();
                    //通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
                    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
                    //返回.intersectObjects()参数中射线选中的网格模型对象
                    // 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
                    var intersects = raycaster.intersectObjects(scene.children,true);
                    console.log("射线投射器返回的对象", intersects);
                    // console.log("射线投射器返回的对象 点point", intersects[0].point);
                    // console.log("射线投射器返回的对象 几何体",intersects[0].object.geometry.vertices)
                  
                  
                    // intersects.length大于0说明，说明选中了模型
                    if (intersects.length > 0 && intersects[0].object.custType=="xz") {
                        console.log('====================>>>>',intersects[0].object);
                      // 选中模型的第一个设置为半透明
                      // intersects[0].object.material.transparent = true;
                      if(_this.activBox==intersects[0].object.name && intersects[1] && intersects[1].object.boxType == 2){
                          // children
                          console.log('格子触发',intersects[1]);
                          _this.unitName = intersects[1].object.name
                      }else{
                          if(intersects[0].object.boxType==1){
                              if(_this.activBox){
                                  let ubox = scene.children.filter(e=>e.name == _this.activBox)[0]
                                  const color1 = new THREE.Color( 0x000229 );
                                  ubox.children.map(e=>{
                                      let level = parseInt(e.name.split('-')[2])
                                      let x1 = e.position.x
                                      let y1 = e.position.y-(level*110)
                                      let z1 = e.position.z
                                      e.position.set(x1,y1,z1)
                                  })
                                  ubox.material.color = color1;
                                  ubox.material.opacity = 0.7;
                              }
                              _this.activBox = intersects[0].object.name
                              console.log(intersects[0].object.children);
                                  const color2 = new THREE.Color( 0xff0000 );
                              intersects[0].object.children.map(e=>{
                                  let level = parseInt(e.name.split('-')[2])
                                  let x1 = e.position.x
                                  let y1 = e.position.y+(level*110)
                                  let z1 = e.position.z
                                  e.position.set(x1,y1,z1)
                              })
                              intersects[0].object.material.color = color2;
                              intersects[0].object.material.opacity = 0.3;
                              _this.unitName = ''
                          }else if(intersects[0].object.boxType==2){
                              console.log('格子触发',intersects[0]);
                              _this.unitName = intersects[0].object.name
                          }
                      }
                    }
                  }
                  
                  
                  addEventListener('click', choose);
              }
    
              // 初始化相机
              function initCamera() {
                  let dom = document.getElementById('energy2')
                  //屏幕坐标转WebGL标准设备坐标
                  var offsetWidth = dom.offsetWidth //WebGL标准设备横坐标
                  // var y = dom.offsetHeight; //WebGL标准设备纵坐标
                  camera = new THREE.PerspectiveCamera(45, offsetWidth / 550, 0.1, 5000);
                  camera.position.set(-356.8229142488742, 328.6993135541272,443.6294896192133);

                  camera.lookAt(new THREE.Vector3(0, 0, 0));
              }
    
              // 初始化灯光
              function initLight() {
                  var directionalLight = new THREE.DirectionalLight(0xffffff, 0.1); //模拟远处类似太阳的光源
                  directionalLight.color.setHSL(0.1, 1, 0.95);
                  directionalLight.position.set(0, 200, 0).normalize();
                  scene.add(directionalLight);
    
                  var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
                  ambient.position.set(0, 0, 0);
                  scene.add(ambient);
              }
    
              //         // 初始化性能插件
              //         function initStats() {
              //             var stats = new Stats();
    
              //             stats.domElement.style.position = 'absolute';
              //             stats.domElement.style.left = '0px';
              //             stats.domElement.style.top = '0px';
    
              //             document.body.appendChild(stats.domElement);
              //             return stats;
              //         }
    
              // 初始化渲染器
              function initRenderer() {
                  renderer = new THREE.WebGLRenderer({
                      antialias: true
                  });
                  let dom = document.getElementById('energy2')
                  //屏幕坐标转WebGL标准设备坐标
                  var offsetWidth = dom.offsetWidth //WebGL标准设备横坐标
                  renderer.setSize(offsetWidth, 550);
                  renderer.setClearColor(0x0F1726,0);
                  dom.appendChild(renderer.domElement);
                  // 集装箱 , , 0,
                  _this.drawContainer(scene, { l:200 , w: 200, h:450  },{x:0,y:0,z:0},0)
                  // 悬浮提示框
                  let currentIntersected;
                  let pieceW = ''
                  let tooltip = document.createElement('div');
                  tooltip.style.position = 'fixed';
                  tooltip.style.zIndex = '9999';
                  tooltip.style.background = 'rgba(0,0,0,0.38)';
                  tooltip.style.padding = '8px';
                  tooltip.style.borderRadius = '5px';
                  tooltip.style.visibility = 'hidden';
                  dom.appendChild(tooltip);
                  // _this.drawContainer(scene, g,{x:400,y:110,z:-300},Math.PI / 2)
                  // 监听鼠标移动事件，显示悬浮提示框 点击 mouseup 触碰mousemove
                  renderer.domElement.addEventListener('mousemove', function(event) {
                    // let mouse = new THREE.Vector2();
                    // console.log(event.clientX,event.clientY );
                    let w_w = window.innerWidth
                    let w_h = window.innerHeight
                    let dom = document.getElementById('energy2')
                    let e_w = dom.offsetWidth*(event.clientX/w_w)
                    let e_h = dom.offsetHeight*(event.clientY/w_h)
                    // console.log('===',e_w,e_h);
                    let x = (e_w/ (dom.offsetWidth+5)) * 2 - 1;
                    let y = -(e_h / (dom.offsetHeight+1)) * 2 + 1;
                    let raycaster = new THREE.Raycaster();
                    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
                    let intersects = raycaster.intersectObjects(scene.children, true);
                    if (currentIntersected) {
                      currentIntersected.material.color = pieceW;
                      // console.log(currentIntersected);
                      currentIntersected = null;
                    }
                    if (intersects.length > 1) {
                    console.log(intersects);
                      let custType = intersects[1].object.parent?intersects[1].object.parent.custType:''
                        if(intersects[1].object.custType == 'xz' || custType == 'xz'){
                              tooltip.style.visibility = 'visible';
                              tooltip.style.left = (event.clientX + 20) + 'px';
                              tooltip.style.top = (event.clientY - 20) + 'px';
                              // tooltip.innerHTML = intersects[0].object.name;
                              
                              // 触碰变颜色
                              currentIntersected = custType=='xz'?intersects[1].object.parent:intersects[1].object;
                              console.log(11,currentIntersected);
                              pieceW = currentIntersected.material.color
                              const color1 = new THREE.Color( "rgb(64, 230, 254)");
                              currentIntersected.material.color = color1;
                              tooltip.innerHTML=`
                                  <div>
                                      <div style="color:#fff">${currentIntersected.cunstName||''}</div>
                                      <div style="font-size:12px;margin-top:5px">
                                          <span style="color:#fff">状态：</span>
                                          <span style="color:rgb(64, 230, 254)">正常</span>
                                      </div>
                                  </div>
                              `
                              
                              // currentIntersected.material.opacity = 0.7;
                        }else{
                            tooltip.style.visibility = 'hidden';
                        }
                    } else {
                      tooltip.style.visibility = 'hidden';
                    }
                  });
              }
              //创建地板
              function createFloor() {
                  var loader = new THREE.TextureLoader();
                  loader.load(diban, function(texture) {
                      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
                      texture.repeat.set(5, 3);
                      var floorGeometry = new THREE.BoxGeometry(2000, 1200, 20);
                      var floorMaterial = new THREE.MeshBasicMaterial({
                          map: texture,
                          side: THREE.DoubleSide
                      });
                      var floor = new THREE.Mesh(floorGeometry, floorMaterial);
                      floor.position.y = -115;
                      floor.rotation.x = Math.PI / 2;
                      floor.name = "地面";
                      scene.add(floor);
                  }, () => {
                      console.log(666);
                  }, (err) => {
                      console.warn(err);
                  });
              }
              //创建墙
              function createCubeWall(width, height, depth, angle, material, x, y, z, name){
                  var cubeGeometry = new THREE.BoxGeometry(width, height, depth );
                  var cube = new THREE.Mesh( cubeGeometry, material );
                  cube.position.x = x;
                  cube.position.y = y;
                  cube.position.z = z;
                  cube.rotation.y += angle*Math.PI;  //-逆时针旋转,+顺时针
                  cube.name = name;
                  scene.add(cube);
              }
              function initContent() {
                  createFloor();
     
              }
              // 初始化轨迹球控件
              function initControls() {
                  controls = new OrbitControls(camera, renderer.domElement);
                  controls.enableDamping = true;
                  controls.dampingFactor = 0.5;
                  // 视角最小距离
                  controls.minDistance = 400;
                  // 视角最远距离
                  controls.maxDistance = 1000;
                  // 最大角度
                  controls.maxPolarAngle = Math.PI / 3;
                  controls.minPolarAngle = Math.PI / 3;
              }
    
              // 更新控件
              function update() {
                  // stats.update();
                  // controls.update();
              }
    
              // 初始化
              function init() {
                  initScene();
                  initCamera();
                  initRenderer();
                  // initContent();//地板
                  initLight();
                  initControls();
                  document.addEventListener('resize', onWindowResize, false);
              }
    
              // 窗口变动触发的方法
              function onWindowResize() {
                  camera.aspect = window.innerWidth / window.innerHeight;
                  camera.updateProjectionMatrix();
                  renderer.setSize(window.innerWidth, window.innerHeight);
              }
    
              function animate() {
                  requestAnimationFrame(animate);
                  renderer.render(scene, camera);
                  // update();
              }
              
             
              
              init();
              animate();
        },
          methods: {
    // 画单个箱子
              drawBox(scene, box, axes, info,color='') {
                let { l, w, h } = box
                let { x, y, z } = axes
                let geometry = new THREE.BoxGeometry(l, w, h)
                // 箱子图片纹理
                let textureLoader = new THREE.TextureLoader()
                let plasterTexture = textureLoader.load(mian3)
           
           
                let material = new THREE.MeshLambertMaterial({
                  // wireframe: true,
                  color,
                  map: plasterTexture,
                  opacity: 1
                })
           
           
                // 根据箱子画出响应 标签
                // this.drawTagPlane(scene, box, axes)
                // 箱子顶部封口
                let cube = new THREE.Mesh(geometry, material)
                cube.position.set(x, y, z)
                cube.custType = 'xz'
                this.drawTopPlane(cube, box, axes,color)
           
                cube.boxType = 'BOX'
                cube.boxInfo = JSON.stringify(info)
                scene.add(cube)
              },
              // 画集装箱
              drawContainer(scene, box, axes = { x: 0, y: 0, z: 0 },rotate=0) {
                let { l, w, h } = box
                let { x, y, z } = axes
                var JGeometry = new THREE.BoxGeometry(l, w, h)
                // 箱子图片纹理
                let textureLoader = new THREE.TextureLoader()
                let plasterTexture = textureLoader.load(mian1)
                var jMmaterial = new THREE.MeshLambertMaterial({
                  transparent: true,
                  opacity: .0,
                  map: plasterTexture,
                  side:THREE.DoubleSide,//不设置此项的话，我们只能看到一面字体，当旋转角度后，另外一面不可见
                })
                var cube = new THREE.Mesh(JGeometry, jMmaterial)
                cube.rotateY(rotate)
                cube.position.set(x, y, z) // 设置立方体坐标
                cube.custType = 'jzx'
                // 画一个3D立体 正方形
                  this.drawBox(
                    cube,
                    { l: 80, w:80, h: 60 },
                    { x: -50, y: -60, z:-h/2+40  },
                    { id: '001' }
                  )
                  this.drawBox(
                    cube,
                    { l: 80, w:80, h: 60 },
                    { x: -50, y: 22, z:-h/2+40  },
                    { id: '001' }
                  )
                  this.drawBox(
                    cube,
                    { l: 80, w:80, h: 60 },
                    { x: -50, y: -60, z:-h/2+40+62*1  },
                    { id: '001' },
                    '#ffff72'
                  )
                  this.drawBox(
                    cube,
                    { l: 80, w:80, h: 60 },
                    { x: -50, y: -60, z:-h/2+40+62*2  },
                    { id: '001' }
                  )
                  this.drawBox(
                    cube,
                    { l: 80, w:80, h: 60 },
                    { x: -50, y: -60, z:-h/2+40+62*3  },
                    { id: '001' },
                    '#f78a8a'
                  )
                  this.drawBox(
                    cube,
                    { l: 80, w:80, h: 60 },
                    { x: -50, y: -60, z:-h/2+40+62*4  },
                    { id: '001' }
                  )
                  this.drawBox(
                    cube,
                    { l: 80, w:80, h: 60 },
                    { x: -50, y: -60, z:-h/2+40+62*5  },
                    { id: '001' }
                  )
                  this.drawBox(
                    cube,
                    { l: 80, w:80, h: 60 },
                    { x: -50, y: -60, z:-h/2+40+62*6  },
                    { id: '001' }
                  )
                  this.drawBox(
                    cube,
                    { l: 80, w:80, h: 60 },
                    { x: 50, y: -60, z:-h/2+40  },
                    { id: '001' }
                  )
                  this.drawCePlane(cube, box, axes)
                 
                scene.add(cube)
              },
              // 创建一个平面 标签
              drawTagPlane(scene, box, axes) {
                let { l, h, w } = box
                let { x, y, z } = axes
                const geometry = new THREE.PlaneGeometry(20, 15)
                let textureLoader = new THREE.TextureLoader()
                let plasterTexture = textureLoader.load(mian1)
                let material = new THREE.MeshLambertMaterial({
                  map: plasterTexture,
                  opacity: 1
                })
                const plane = new THREE.Mesh(geometry, material)
                plane.position.set(
                  x + (l / 2 - 20) + 1,
                  y - w / 2 + 10 + 1,
                  z + h / 2 + 1.01
                  // 100 - this.cabinetSize.h / 2 + 1
                ) // 偏移设置立方体坐标
                scene.add(plane)
              },
              // 创建一个平面 封口
              drawTopPlane(scene, box, axes,color='') {
                let { l, w, h } = box
                let { x, y, z } = axes
                const geometry = new THREE.PlaneGeometry(h, w)
                let textureLoader = new THREE.TextureLoader()
                let plasterTexture = textureLoader.load(mian4)
                let material = new THREE.MeshLambertMaterial({
                    color,
                  map: plasterTexture,
                  opacity: 1
                })
                const plane = new THREE.Mesh(geometry, material)
                const plane2 = new THREE.Mesh(geometry, material)
                plane.rotateY(-Math.PI / 2) //旋转网格模型
                plane2.rotateY(-Math.PI / 2 * -45) //旋转网格模型
                plane.position.set(-l/2-0.5,0,0) // 偏移设置立方体坐标
                plane2.position.set(l/2+0.5,0,0) // 偏移设置立方体坐标
                scene.add(plane)
                scene.add(plane2)
              },
              // 创建2个平面 封口
              drawCePlane(scene, box, axes) {
                let { l, w, h } = box
                let { x, y, z } = axes
                const geometry = new THREE.PlaneGeometry(l, w)
                const geometry2 = new THREE.PlaneGeometry(h,w)
                let textureLoader = new THREE.TextureLoader()
                let plasterTexture = textureLoader.load(mian2)
                let material = new THREE.MeshLambertMaterial({
                  transparent: true,
                  map: plasterTexture,
                  opacity:1,
                  side:THREE.DoubleSide,//不设置此项的话，我们只能看到一面字体，当旋转角度后，另外一面不可见
                })
                let plasterTexture2 = textureLoader.load(mian1)
                let material2 = new THREE.MeshLambertMaterial({
                  transparent: true,
                  map: plasterTexture2,
                  opacity:1,
                  side:THREE.DoubleSide,//不设置此项的话，我们只能看到一面字体，当旋转角度后，另外一面不可见
                })
                const plane = new THREE.Mesh(geometry, material)
                const plane2 = new THREE.Mesh(geometry, material)
                const plane3 = new THREE.Mesh(geometry2, material2)
                const plane4 = new THREE.Mesh(geometry2, material2)
                const plane5 = new THREE.Mesh(geometry2, material2)
                // plane.rotateX(-Math.PI / 2) //旋转网格模型
                plane.position.set(0, -l/2, h/2  +  l/2) // 偏移设置立方体坐标
                plane2.position.set(0, -l/2, -h/2 - l/2) // 偏移设置立方体坐标
                plane3.position.set(-l, -l/2, 0) // 偏移设置立方体坐标
                plane4.position.set(l, -l/2, 0) // 偏移设置立方体坐标
                plane5.position.set(0, -l/2, 0) // 偏移设置立方体坐标
                plane2.rotateX(-Math.PI / 2 ) //旋转网格模型
                plane3.rotateX(-Math.PI / 2 ) //旋转网格模型
                plane3.rotateZ(-Math.PI / 2 ) //旋转网格模型
                plane4.rotateX(-Math.PI / 2 ) //旋转网格模型
                plane4.rotateZ(-Math.PI / 2 ) //旋转网格模型
                plane5.rotateX(-Math.PI / 2 ) //旋转网格模型
                plane5.rotateZ(-Math.PI / 2 ) //旋转网格模型
                plane.rotateX(-Math.PI / 2 ) //旋转网格模型
                scene.add(plane)
                scene.add(plane2)
                scene.add(plane3)
                scene.add(plane4)
                scene.add(plane5)
              },
              //  圆立体
              drawSphere(scene) {
                // 球体网格模型
                var geometry2 = new THREE.SphereGeometry(20, 20, 20)
                var material2 = new THREE.MeshLambertMaterial({
                  color: 0xfdd500
                })
                var mesh2 = new THREE.Mesh(geometry2, material2) //网格模型对象Mesh
                // 设置 坐标
                mesh2.position.set(200, 100, 100)
                scene.add(mesh2)
              },
              sceneControls(scene, camera, renderer) {
                // 控制器渲染
                var controls = new OrbitControls(camera, renderer.domElement)
                controls.addEventListener('change', function() {
                  // 直接渲染
                  renderer.render(scene, camera) //渲染
                })
              },
              setRight() {
                  this.right = this.right=='10px'?'-290px':'10px'
              },
              setLeft() {
                  this.left = this.left=='10px'?'-290px':'10px'
              }
          }
    }
</script>

<style scoped="scoped" lang="less">
    #box_detail_3D{
        // display: flex;
        position: relative; 
            overflow: hidden;
        #energy2{
            width: 100%;
            height: 550px;
            background-image: linear-gradient(top,#0d307b , #324776);
        }
        .data_3d_left{
            position: absolute;   
            width: 290px;
            padding: 0 20px;
            left: 10px;
            top: 10px;
            background-color: rgba(0,0,0,0.33);
            border-radius: 10px;
            padding-bottom: 10px;
            transition: all 0.8s;
            .show_btn{
                position: absolute;
                left: 290px;
                top: calc(50% - 60px);
                height: 120px;
                width: 20px;
                border-radius:0 20px 20px 0;
                line-height: 120px;
                text-align: center;
                background-color: rgba(0,0,0,0.33);
                color: #fff;
                cursor: pointer;
                
            }
            .title{
                padding-top: 16px;
                padding-bottom: 6px;
                font-size: 16px;
                color: #fff;
                font-weight: 500;
            }
            .info{
                display: flex;
                align-items: center;
                padding: 5px 0;
                .desc{
                    color: #ccc;
                    min-width: 100px;
                }
                .con{
                    color: rgb(64, 230, 254);
                }
            }
        }
        .data_3d_right{
            position: absolute;
            width: 290px;
            max-height: calc(100% - 20px);
            padding: 0 20px;
            right: 10px;
            top: 10px;
            background-color: rgba(0,0,0,0.33);
            border-radius: 10px;
            padding-bottom: 20px;
            transition: all 0.8s;
            .show_btn{
                position: absolute;
                left: -20px;
                top: calc(50% - 60px);
                height: 120px;
                width: 20px;
                border-radius: 20px 0 0 20px;
                line-height: 120px;
                text-align: center;
                background-color: rgba(0,0,0,0.33);
                color: #fff;
                cursor: pointer;
                
            }
            .title{
                padding-top: 16px;
                padding-bottom: 6px;
                font-size: 16px;
                color: #fff;
                font-weight: 500;
            }
            .info_box{
                display: flex;
                flex-wrap: wrap;
                max-height: calc(550px - 86px);
                overflow: auto;
                .info{
                    width: 47%;
                    padding: 5px 0;
                    .desc{
                        color: #ccc;
                        min-width: 100px;
                        font-size: 12px;
                    }
                    .con{
                        color: rgb(64, 230, 254);
                        font-size: 14px;
                    }
                }
                .info:nth-of-type(2n){
                    margin-left: 6%;
                }
            }
            .info_box::-webkit-scrollbar {
              /*滚动条整体样式*/
              width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
              height: 1px;
              border-radius: 2px;
            }
            .info_box::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 2px;
              box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
              background: #78b4b4;
            }
            .info_box::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
              border-radius: 10px;
              background: #ededed;
            }
        }
        
        
    }
    
</style>
